<template>
	<view>
		<view class="head-box">
			<view class="title">总收益（元）</view>
			<view class="sbw">
				<view class="money">0</view>
				<view class="out" @click="withdrawalRecord">提现记录</view>
			</view>
		</view>
		<view class="withdrawal">
			<view class="withdrawal-title">提现金额</view>
			<view class="withdrawal-money">
				<view>￥</view>
				<input type="text" placeholder="请输入提现金额" placeholder-class="mo" />
			</view>
			<view class="withdrawal-box">
				<view class="withdrawal-to">提现至</view>
				<view class="withdrawal-select" @click="confirm">
					<view class="withdrawal-way" v-if="wxType">微信支付</view>
					<view class="withdrawal-way mo" v-else>请选择提现方式</view>
					<view class="wlIcon-fanhui2"></view>
				</view>
			</view>
			<view class="withdrawal-o">确认提现</view>
		</view>
		<view class="white-box">
			<view class="title-name">提现说明</view>
			<view class="contents">1.账户状态
				账户必须是正常状态。例如，不能处于冻结、挂失或者被限制交易等异常情况。如果账户因为安全问题被冻结，需要先解除冻结状态，可能要通过身份验证、解决纠纷等方式，才能进行提现。
				对于一些平台账户，可能需要完成实名认证。实名认证是为了确保资金的合法流转，防止洗钱等非法金融行为。一般要求用户提供真实姓名、身份证号码，并且可能需要上传身份证照片进行验证。
				2.资金来源合法性
				只有合法来源的资金才能提现。比如，通过正规的交易收入、退款等方式获得的资金可以提现。而如果资金涉及欺诈、非法转账等情况，是不允许提现的，并且平台可能会配合执法部门进行调查。
			</view>
		</view>
		<view class="black" v-if="state">
			<view class="white">
				<view class="alert-title">选择提现方式</view>
				<view class="alert-box">
					<view class="wlIcon-31xuanzhong icon-con"></view>
					<view class="wlIcon-WeChat icon-wx"></view>
					<view class="alert-text">微信零钱</view>
				</view>
				<view class="alert-con" @click="identify">确认提现</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				state: false,
				wxType: false
			}
		},
		methods: {
			confirm() {
				this.state = true
			},
			identify() {
				this.state = false
				this.wxType = true
			},
			withdrawalRecord() {
				this.$wanlshop.to(`/pages/new/withdrawalRecord/withdrawalRecord`);
			}
		}
	}
</script>

<style lang="scss">
	.head-box {
		width: 670rpx;
		margin-left: 40rpx;
		padding: 62rpx 0;

		.title {
			font-size: 26rpx;
			color: #333333;
		}

		.sbw {
			width: 670rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 10rpx;

			.money {
				font-size: 70rpx;
				color: #333333;
			}

			.out {
				width: 159rpx;
				height: 52rpx;
				border-radius: 50rpx;
				background: #84BD00;
				color: #fff;
				font-size: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.withdrawal {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-left: 40rpx;
		padding-top: 35rpx;
		padding-bottom: 62rpx;

		.withdrawal-title {
			font-size: 30rpx;
			color: #3D3D3D;
			margin-left: 40rpx;
		}

		.withdrawal-money {
			width: 610rpx;
			height: 100rpx;
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			view {
				font-size: 30rpx;
				font-weight: bold;
				color: #3D3D3D;
			}

			input {
				font-size: 26rpx;
				margin-left: 10rpx;
			}

			.mo {
				color: #999999;
			}
		}

		.withdrawal-box {
			width: 610rpx;
			height: 120rpx;
			margin-left: 40rpx;
			border-top: 1px solid #DBDBDB;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.withdrawal-to {
				font-size: 26rpx;
				color: #333333;
			}

			.withdrawal-select {
				display: flex;
				align-items: center;

				.withdrawal-way {
					font-size: 26rpx;
				}

				.mo {
					color: #999999;
				}

				.wlIcon-fanhui2 {
					font-size: 26rpx;
					margin-left: 6rpx;
					margin-top: 4rpx;
				}
			}
		}

		.withdrawal-o {
			width: 610rpx;
			height: 82rpx;
			background-color: #84BD00;
			margin-left: 40rpx;
			border-radius: 50rpx;
			font-size: 30rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.white-box {
		width: 690rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
		padding: 35rpx 0;

		.title-name {
			font-size: 30rpx;
			color: #3D3D3D;
			margin-left: 40rpx;
		}

		.contents {
			margin-left: 40rpx;
			width: 610rpx;
			font-size: 26rpx;
			color: #999999;
			margin-top: 35rpx;
		}
	}

	.black {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .7);

		.white {
			width: 750rpx;
			border-radius: 30rpx 30rpx 0px 0px;
			background: #FFFFFF;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);

			.alert-title {
				text-align: center;
				font-size: 36rpx;
				color: #333333;
				padding: 60rpx 0;
			}

			.alert-box {
				display: flex;
				align-items: center;
				margin-left: 38rpx;

				.icon-con {
					font-size: 36rpx;
					color: #84BD00;
				}

				.icon-wx {
					font-size: 36rpx;
					color: #00C800;
					margin-left: 38rpx;
				}

				.alert-text {
					font-size: 30rpx;
					color: #333333;
					margin-left: 14rpx;
				}
			}

			.alert-con {
				width: 670rpx;
				height: 82rpx;
				border-radius: 50rpx;
				margin-left: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #84BD00;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-bottom: 70rpx;
				margin-top: 200rpx;
			}
		}
	}
</style>